<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>修改支付密码</title>
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <style>
        html,
        body {
            background-color: #EEEEEE;
        }
* {
            margin: 0;
            padding: 0;
        }

        .please {
            font-size: 15px;
            color: #595959;
            line-height: 27px;
            font-weight: 400;
            margin: 10px 15px;
        }

        .six-number {
            font-size: 13px;
            color: #313131;
            line-height: 27px;
            font-weight: 400;
            margin: 10px 15px;
        }

        .sure {
            text-align: center;
            margin: 20px 0 0 0;
        }

        .sure>button {
            width: 6.4rem;
            height: 45px;
            line-height: 37px;
            background-color: #0A5AFA;
            color: white;
            border: none;
            font-size: 17px;
            font-weight: 400;
        }

        .change {
            font-size: 15px;
            text-align: center;
            display: block;
            margin: 20px 0 0 0;
        }

        .list_o {
            background-color: white;
        }

        .list_ou {
            border-bottom: 1px solid rgba(131, 131, 139, 0.18);
        }

        .list_ou input {
            border: none;
            outline: none;
            margin: 0;
        }

        input::-webkit-input-placeholder {
            font-size: 14px;
            color: rgba(191, 191, 191, 0.6);
            font-weight: 500;
        }

        .list_h {
            display: flex;
            align-items: center;
        }

        .list_h>input {
            flex: 5;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .list_h>div {
            flex: 5;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 15px;
        }

        .list_h>div>button {
            width: 2.67rem;
            height: 0.8rem;
            border: none;
            outline: none;
            background-color: #0A5AFA;
            color: white;
            border-radius: 5px;
        }

        .list_border {
            border: none;
        }

    </style>
</head>

<body>
    <div class="main">
        <div class="please">请验证您的手机并设置支付密码</div>
        <div class="list_o">
            <div class="list_ou">
                <input id="username" type="text" placeholder="请输入手机号" />
            </div>
            <div class="list_ou list_h">
                <input type="text" placeholder="请输入验证码" />
                <div><button onclick="sendCode()" id="btnSendCode">获取验证码</button></div>
            </div>
            <div class="list_ou">
                <input type="password" placeholder="请输入新的密码" />
            </div>
            <div class="list_ou list_border">
                <input type="password" placeholder="请再次输入新密码" />
            </div>
        </div>
        <div class="six-number">密码设置为6位数字</div>
        <div class="sure" tapmode onclick="set_up()"><button>确 定</button></div>
        <a href="#" class="change">收不到验证码？</a>
    </div>


</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript">
    headInner({
        title: "修改支付密码",
        //headleft
        headl: '<a href="javascript:history.back(-1)" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
        //headright
        headr: '<a style="color:white"></a>',
        color: "", //默认是蓝色
        padding: "0px 0 0", //默认有padding:45px 15px 0;
    })

    function modifypassword() {
        api.openWin({
            name: 'modify-payment-password',
            url: '../html/modify-payment-password.html'
        });
    }

    function set_up() {
        api.openWin({
            name: 'set-up',
            url: '../html/set-up.html'
        });
    }
    /*------------------短信验证-------------------------*/
    var after = '';
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount = 60; //当前剩余秒数
    var exp = new Date();
    var time;
    time = exp.getTime();
    //获取cookie值
    function getCookie(name) {
      var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
      if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
      else
        return null;
    }
    //这是有设定过期时间的使用示例：
    //s20是代表20秒
    //h是指小时，如12小时则是：h12
    //d是天数，30天则：d30
    //设置cookie
    function setCookie(name, value, time) {
      var strsec = getsec(time);
      var exp = new Date();
      exp.setTime(exp.getTime() + strsec * 1);
      document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    }

    function getsec(str) {
      // alert(str);
      var str1 = str.substring(1, str.length) * 1;
      var str2 = str.substring(0, 1);
      if (str2 == "s") {
        return str1 * 1000;
      } else if (str2 == "h") {
        return str1 * 60 * 60 * 1000;
      } else if (str2 == "d") {
        return str1 * 24 * 60 * 60 * 1000;
      }
    }

    function sendCode() {
      if (getCookie('after') > time && document.cookie.indexOf('after=') != -1) {
        api.toast({ //提示框1秒
          msg: ' 请不要在60秒内重复获取验证码! ',
          duration: 1100,
          location: 'top'
        })
      } else {
        trySend(); //调用一次
      }

    }

    function trySend() {
      if (getCookie('after') < time || document.cookie.indexOf('after=') == -1 || getCookie('after') == null) {
        var cellPhoneNumber = $api.byId('username').value;
        console.log(cellPhoneNumber);
        api.ajax({
          url: URL + 'auth/sendCodeSMS', //短信验证
          method: 'POST',
          data: {
            values: {
              mobile: cellPhoneNumber
            }
          }
        }, function(ret, err) {
          if (ret.code == 200) {
            api.toast({
              msg: "车车侠：" + ret.message,
              duration: 2000,
              location: 'bottom',
              global: true,
            });

          } else {
            reToast(ret, err);
          }
          Countdown();
        });


      }
    }
    // 倒计时函数
    function Countdown() {
      setCookie("after", time + 60 * 1000, "s60");
      // setCookie("phone", $('#phone').val(), "s60");
      setCookie("phone", $api.byId('username').value, "s60");
      curCount = count;
      //设置button效果，开始计时
      // $("#btnSendCode").attr("disabled", "true");
      $api.byId('btnSendCode').setAttribute("disabled", "true");
      // $("#btnSendCode").val(curCount + "秒后重新获取");
      $api.byId('btnSendCode').value = (curCount + "秒后重新获取");
      InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
    }

    //timer处理函数
    function SetRemainTime() {
      if (curCount == 0) {
        window.clearInterval(InterValObj); //停止计时器
        // $("#btnSendCode").removeAttr("disabled"); //启用按钮
        $api.byId('btnSendCode').removeAttribute("disabled");
        $api.byId('btnSendCode').innerHTML = ("重新发送验证码");
        // $("#btnSendCode").val("重新发送验证码");
        // code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
      } else {
        curCount--;
        // $("#btnSendCode").val(curCount + "秒后重新获取");
        $api.byId('btnSendCode').innerHTML = (curCount + "秒后重新获取");
      }
    }
    /*------------------短信验证结束-------------------------*/
</script>

</html>
